<!-- TaskDetail.vue -->
<template>
	<view class="task-detail">
		<view class="top_sticky">
			<view style="position: absolute; left: 20rpx; font-size: 36rpx" @click="goBack()"><u-icon
					name="arrow-left"></u-icon></view>
			任务详情
		</view>
		<view style="padding: 30rpx;    overflow: auto;
    height: 80vh;">
			<view v-if="data">
				<!-- 遍历展示巡检反馈内容 -->
				<view class="feedback-section">
					<!-- <view class="section-title">详情内容</view> -->
					<view v-if="data.jobinfo && data.jobinfo.inspectionFeedback">
						<view v-for="(item, index) in data.jobinfo.inspectionFeedback" :key="index" class="task-item">
							<view class="task-header">
								<view class="task-number">任务{{ index + 1 }}：</view>
								<view class="task-name">{{ item.key || "未命名任务" }}</view>
							</view>
							<view class="task-content">
								<textarea class="content-input" v-model="item.value" placeholder="请输入任务内容" :disabled="isInspectionCompleted"></textarea>
							</view>
						</view>
					</view>
					<view v-else class="empty-tip">暂无巡检任务</view>
				</view>

				<!-- 状态标签 -->
				<!-- <view
            :style="{
              backgroundColor: data.status === '已完成' ? '#4cd964' : '#f56c6c',
              color: '#fff',
              padding: '6rpx 16rpx',
              borderRadius: '8rpx',
              display: 'inline-block',
              marginTop: 20
            }"
          >
            {{ data.status }}
          </view> -->
			</view>
			<view v-else class="loading-tip">加载中...</view>

			<!-- 添加图片上传区域 -->
			<view v-if="data" class="upload-section">
				<text class="upload-title">上传照片</text>
				<wpwork-upload v-model="imageurl" :limit="9" tipText="" :disabled="isInspectionCompleted"></wpwork-upload>
			</view>
		</view>
		<view v-if="!isInspectionCompleted" class="button-but">
			<button type="primary" class="button-btn" style="width: 57%" @click="saveData">保存</button>
		</view>
	</view>
</template>

<script>
	// 导入图片上传组件
	import wpworkUpload from "@/components/wpwork/wpwork-upload/index.vue";
	import {
		updateData
	} from "@/api/xjxt.js"
	export default {
		components: {
			wpworkUpload,
		},
		data() {
			return {
				data: null,
				imageurl: [], // 初始化图片上传字段
			};
		},
		computed: {
			isInspectionCompleted() {
				// 检查巡检状态是否为"是"
				return this.data && this.data.jobinfo && this.data.jobinfo.isinspection === "是";
			}
		},
		onLoad(options) {
			try {
				// 解码并解析传入的对象
				this.data = JSON.parse(decodeURIComponent(options.data));
				console.log(this.data);
				// 确保data中存在jobinfo对象
				if (!this.data.jobinfo) {
					this.data.jobinfo = {};
				}
				// 如果data中有imageurl字段，尝试处理
				if (this.data.imageurl) {
					if (typeof this.data.imageurl === 'string') {
						try {
							// 如果是字符串尝试解析为数组
							this.imageurl = JSON.parse(this.data.imageurl);
						} catch (e) {
							// 解析失败则重置为空数组
							this.imageurl = [];
						}
					} else if (Array.isArray(this.data.imageurl)) {
						this.imageurl = this.data.imageurl;
					}
				}
			} catch (e) {
				console.error("解析数据失败", e);
				uni.showToast({
					title: "数据错误",
					icon: "none",
				});
			}
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1,
				});
			},
			nextTask() {},
			completeTask() {
				// 处理完成任务的逻辑
				console.log("任务完成");
			},
			saveData() {
				// 检查数据是否存在
				if (!this.data || !this.data.jobinfo) {
					uni.showToast({
						title: "数据异常，保存失败",
						icon: "none",
					});
					return;
				}

				// 如果有inspectionFeedback字段，则检查所有任务是否都有内容
				if (this.data.jobinfo.inspectionFeedback) {
					const allHaveContent = this.data.jobinfo.inspectionFeedback.every(item => {
						return item.value && item.value.trim() !== '';
					});

					// 如果所有任务都有内容，则设置状态为已完成并记录时间
					if (allHaveContent) {
						this.data.jobinfo.isinspection = "是";
						// 设置当前时间为inspectionTime
						const now = new Date();
						const year = now.getFullYear();
						const month = (now.getMonth() + 1).toString().padStart(2, '0');
						const day = now.getDate().toString().padStart(2, '0');
						const hours = now.getHours().toString().padStart(2, '0');
						const minutes = now.getMinutes().toString().padStart(2, '0');
						const seconds = now.getSeconds().toString().padStart(2, '0');
						this.data.jobinfo.inspectionTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
					} else {
						// 如果有任务未填写，则设置状态为未完成
						this.data.jobinfo.isinspection = "否";
					}
				}

				// 将imageurl数组转换为JSON字符串并添加到data中
				if (Array.isArray(this.imageurl)) {
					this.data.imageurl = JSON.stringify(this.imageurl);
				}
				this.data.jobinfo.inspectionFeedback = JSON.stringify(this.data.jobinfo.inspectionFeedback)
				this.data.jobinfo = JSON.stringify(this.data.jobinfo)
				// 提交数据
				console.log("保存的数据:", this.data);
				updateData(this.data).then(res => {
					// 显示保存成功提示
					uni.showToast({
						title: "保存成功",
						icon: "success",
						duration: 2000,
						complete: () => {
							// 保存成功后返回上一页
							setTimeout(() => {
								uni.navigateBack({
									delta: 1,
								});
							}, 1500);
						}
					});
				})

			}
		},
		created() {},
	};
</script>

<style scoped>
	.top_sticky {
		z-index: 999;
		position: sticky;
		top: var(--window-top);
		background: linear-gradient(to right, #014feb, #2775fe);
		height: 130rpx;
		line-height: 170rpx;
		color: #fff;
		text-align: center;
		font-weight: 400;
		font-size: 36rpx;
	}

	.divider {
		border-bottom: 1px solid #ebf5ff;
		margin-bottom: 20rpx;
	}

	.button-but {
		display: flex;
		padding: 0 20rpx;
		position: absolute;
		width: 100%;
		bottom: 0px;
	}

	.button-btn {
		height: 78rpx;
		border-radius: 50rpx;
		font-size: 30rpx;
		margin-bottom: 20rpx;
	}

	/* 新增样式 */
	.feedback-section {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 32rpx;
		color: #3a3a4a;
		font-weight: bold;
		margin-bottom: 20rpx;
		padding-bottom: 10rpx;
		border-bottom: 1px solid #f0f0f0;
	}

	.task-item {
		background-color: #f9f9f9;
		border-radius: 8rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		border-left: 4rpx solid #014feb;
	}

	.task-header {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.task-number {
		font-size: 28rpx;
		color: #014feb;
		font-weight: bold;
		margin-right: 10rpx;
	}

	.task-name {
		font-size: 30rpx;
		color: #3a3a4a;
		flex: 1;
	}

	.task-content {
		margin-top: 10rpx;
	}

	.content-input {
		font-size: 28rpx;
		color: #494f58;
		width: 100%;
		height: 120rpx;
		padding: 20rpx;
		border: 1px solid #e4e7ed;
		border-radius: 8rpx;
		background-color: #fff;
		box-sizing: border-box;
	}

	.empty-tip,
	.loading-tip {
		text-align: center;
		color: #8f959e;
		font-size: 28rpx;
		padding: 40rpx 0;
	}

	/* 上传组件样式 */
	.upload-section {
		margin-top: 30rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		/* margin-bottom: 100rpx; */
		/* 为底部按钮留出空间 */
	}

	.upload-title {
		margin-bottom: 10rpx;
		display: inline-block;
		color: #8f959e;
		font-size: 32rpx;
	}
</style>